<template >
	<view >
		<view class="container">
			<view class="category-list">
				<view class="category-item" v-for="(category, index) in categories" :key="index">
					<view class="category-name" @click="showIndex=index">{{ category.name }}</view>
					<view class="sub-category-list" v-if="showIndex==index">
						<view class="sub-category-item" v-for="(subCategory, subIndex) in category.children"
							:key="subIndex">
							<view class="sub-category-name">{{ subCategory.name }}</view>
							<view class="sub-sub-category-list">
								<view class="sub-sub-category-item"
									v-for="(subSubCategory, subSubIndex) in subCategory.children" :key="subSubIndex">
									<img class="sub-category-icon" :src="subSubCategory.imagesPath"
										alt="Subcategory Icon">
									<view class="sub-sub-category-name">{{ subSubCategory.name }}</view>
								</view>
								<view style="clear: both;"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listAll
	} from '@/api/product/categories'

	export default {
		data() {
			return {
				categories: [],
				showIndex:0
			};
		},
		methods: {
			handleTree(data, id, parentId, children) {
				let config = {
					id: id || 'id',
					parentId: parentId || 'parentId',
					childrenList: children || 'children'
				};

				var childrenListMap = {};
				var nodeIds = {};
				var tree = [];

				for (let d of data) {
					let parentId = d[config.parentId];
					if (childrenListMap[parentId] == null) {
						childrenListMap[parentId] = [];
					}
					nodeIds[d[config.id]] = d;
					childrenListMap[parentId].push(d);
				}

				for (let d of data) {
					let parentId = d[config.parentId];
					if (nodeIds[parentId] == null) {
						tree.push(d);
					}
				}

				for (let t of tree) {
					adaptToChildrenList(t);
				}

				function adaptToChildrenList(o) {
					if (childrenListMap[o[config.id]] !== null) {
						o[config.childrenList] = childrenListMap[o[config.id]];
					}
					if (o[config.childrenList]) {
						for (let c of o[config.childrenList]) {
							adaptToChildrenList(c);
						}
					}
				}
				return tree;
			}
		},
		async onLoad() {
			console.info("11111")
			let out = await listAll({})
			this.categories = this.handleTree(out.data, "id", "parentId");
		}
	};
</script>

<style>
	.container {
		padding: 20px;
		padding-left: 0px;
		padding-top: 0px;
		
	
	}

	.category-list {
		display: flex;
		flex-direction: column;
	}

	.category-item {
		width: 30%;
		padding: 20px;
		text-align: center;
		background-color: white;
	}

	.category-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	.category-item:hover{background-color: #f1f1f1;}
	.category-name {
		margin-top: 5px;
		font-weight: bold;
		
	}

	.sub-category-list {
		margin-top: 10px;
		position: absolute;
		left: 100px;
		width: 70%;
		top: 0px;
	}

	.sub-category-item {
		margin-top: 10px;
		padding: 10px;
		text-align: center;
		border-radius: 8px;
		
	}

	.sub-category-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.sub-category-name {
		margin-top: 10px;
		text-align: left;
	}

	.sub-sub-category-list {
		margin-top: 10px;
	}

	.sub-sub-category-item {
		margin-top: 10px;
		padding: 10px;
		float: left;
		text-align: center;
		border-radius: 8px;
		margin: 10px;
		margin-right:2.5px;
		margin-left: 2.5px;
		width: 75px;
		height: 75px;
	}

	.sub-sub-category-name {
		margin-top: 0px;
		width: 70px;
		height: 35px;
		margin-left: -10px;
	}
</style>